<template>
    <div class="bgf">
        <el-tabs v-model="status" class="demo-tabs" >
            <el-tab-pane label="APP版本管理" name="1"></el-tab-pane>
            <!-- <el-tab-pane label="商户端APP版本管理" name="2"></el-tab-pane> -->
        </el-tabs>
        <!-- <div class="manage1">
            <el-button type="primary" class="w115 " @click="editOpen()" >+ 新增版本</el-button>
        </div> -->
    </div>

    <div class="bgf mart20" v-loading="loading" >
        <div  v-show="status=='1' " class="show" >
            <el-table :data="list1" >
                <el-table-column prop="code" fixed min-width="100" label="版本编号"  ></el-table-column>
                
                <el-table-column prop="versionNum" min-width="100" label="版本号" ></el-table-column>

                <el-table-column min-width="100" label="终端" >
                    <template #default="scope">
                        {{['', '苹果', '安卓'][scope.row.appType]}}
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="最新版本" >
                    <template #default="scope">
                        {{['否', '是'][scope.row.isNow]}}
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="强制更新" >
                    <template #default="scope">
                        {{['否', '是'][scope.row.isForcedUpdating]}}
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" min-width="160" label="创建时间" ></el-table-column>

                <el-table-column fixed="right" label="操作" width="80" align="center" >
                    <template #default="scope">
                        <el-button @click="editOpen(scope.row)" text type="primary">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="h70 pad20 flexab ">
                <p class="font10 cola4">共 {{total1}} 条</p>
                <el-pagination
                    v-model:currentPage="param1.pageNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 15, 20, 25]"
                    :page-size="param1.pageSize"
                    layout=" sizes, prev , jumper , next"
                    :total="total1">
                </el-pagination>
            </div>
        </div>

        <div  v-show="status=='2' "  class="show">
            <el-table :data="list2" >
                <el-table-column prop="code" fixed min-width="100" label="版本编号"  ></el-table-column>
                
                <el-table-column prop="versionNum" min-width="100" label="版本号" ></el-table-column>

                <el-table-column min-width="100" label="终端" >
                    <template #default="scope">
                        {{['', '苹果', '安卓'][scope.row.appType]}}
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="最新版本" >
                    <template #default="scope">
                        {{['否', '是'][scope.row.isNow]}}
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="强制更新" >
                    <template #default="scope">
                        {{['否', '是'][scope.row.isForcedUpdating]}}
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" min-width="160" label="创建时间" ></el-table-column>

                <el-table-column fixed="right" label="操作" width="80" align="center" >
                    <template #default="scope">
                        <el-button @click="editOpen(scope.row)" text type="primary">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="h70 pad20 flexab ">
                <p class="font10 cola4">共 {{total2}} 条</p>
                <el-pagination
                    v-model:currentPage="param2.pageNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 15, 20, 25]"
                    :page-size="param2.pageSize"
                    layout=" sizes, prev , jumper , next"
                    :total="total2">
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog v-model="editShow" :title=" editData.id ? '编辑版本': '添加版本'" width="525px"  >
        <el-form :model="editData" class="demo-form-inline" label-width="90px" v-loading="dialogLoading" >
            
            <el-form-item label="版本">
                <el-input v-model="editData.versionNum" placeholder="输入版本" class="w180"> </el-input>
            </el-form-item>

            <el-form-item label="版本CODE">
                <el-input v-model="editData.code" placeholder="输入版本CODE" class="w180"> </el-input>
            </el-form-item>
            <el-form-item label="介绍：">
                <el-input v-model="editData.note" placeholder="请输入介绍" class="w380" :autosize="{ minRows: 4, }" type="textarea"/> 
            </el-form-item>
            <el-form-item label="下载地址">
                <el-input v-model="editData.downUrl" placeholder="输入下载地址" class="w330"> </el-input>
            </el-form-item>

            <el-form-item label="终端">
                <el-radio-group v-model="editData.appType">
                    <el-radio :label="1">苹果</el-radio>
                    <el-radio :label="2">安卓</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="最新版本">
                <el-radio-group v-model="editData.isNow">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="强制更新">
                <el-radio-group v-model="editData.isForcedUpdating">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
             
        <template #footer>
            <div class="tc">
                <el-button  @click="editShow = false" >取消</el-button>
                <el-button type="primary" @click="editSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script>
export default {
    data(){
        return{
            status: '1',
            loading: false,
            dialogLoading: false,
            param1:{
                pageNumber:1,
                pageSize: 10,
            },
            param2:{
                pageNumber:1,
                pageSize: 10,
            },
            list1:[],
            list2:[],
            total1:0,
            total2:0,
            editShow: false,
            editData:{},

        }
    },
    mounted(){
        this.getList('1');


    },
    methods:{

        
        async getVersion(status){
            let res;

                // 用户
                res = await this.$api.userGetNow();
                console.log(res)
                if(res){
                    
                }
          
            
        },

        async editSub(){
            let that = this;
            console.log(that.editData,'editData');
            let obj = JSON.parse(JSON.stringify(that.editData));
            that.dialogLoading = true;

            let res ;
            // console.log(obj);
            if(this.status=='1'){
                // 用户
                if(obj.id){  //编辑
                    res = await this.$api.userSync(obj);
                }else{  //增加
                    res = await this.$api.userCreate(obj);
                }
                this.getList('1');
            }else if(this.status=='2'){
                // 商户
                if(obj.id){  //编辑
                    res = await this.$api.shopSync(obj);
                }else{  //增加
                    res = await this.$api.shopCreate(obj);
                }
            }
            // let res = await that.$api.addeditRegion(obj);
            that.dialogLoading = false;
                console.log(res)
            if(res){
                that.$message.success(res.message);
                that.getList();
                that.editShow = false;
            }
        },

        editOpen(val){
            let that = this;

            if(val){
                console.log(val,'val--------');
                that.editData = {
                    appType: val.appType,
                    code: val.code,
                    downUrl: val.downUrl,
                    id: val.id,
                    note:val.note,
                    isForcedUpdating: val.isForcedUpdating,
                    isNow: val.isNow,
                    versionNum: val.versionNum,
                    createTime: val.createTime,
                }
            }else{
                that.editData = {};
            }
            
            that.editShow = true;
        },

        async getList(status, pageNumber){
            if(pageNumber){
                this.param.pageNumber = pageNumber;
            }
            this.loading = true;
            let res;

            if(status=='1'){
                // 用户
                console.log(this.param1,'param1');
                res = await this.$api.userPage(this.param1);

                console.log(res)
                if(res){
                    this.list1 = res.records
                    this.total1 = res.total;
                }
            }else if(status=='2'){
  
            }
            
            this.loading = false;
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            if(this.status=='1'){
                this.param1.pageSize = val;
            }else{
                this.param2.pageSize = val;
            }
            this.getList(this.status);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            if(this.status=='1'){
                this.param1.pageNumber = val;
            }else{
                this.param2.pageNumber = val;
            }
            this.getList(this.status);
        },
    }
}
</script>
<style lang="scss" scoped>
.show{
    transition: all 2s linear;
}
.manage1{
    padding: 10px 20px 30px;
    .from{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        margin-bottom: 20px;
    }
}
.manage2{
    padding: 14px ;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.goodsSpace{
    padding-top: 20px;
}
.goodsSpace:nth-child(1){
    padding-top: 0;
}
</style>